<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>卡片</title>
</head>

<body>
    <div class="container">
        <!-- 基础卡片 -->
        <div class="card">
            <div class="card-body">
                基础卡片
            </div>
        </div>

        <hr>
        <!-- 卡片内填充内容 -->
        <div class="card text-center">
            <!-- .card-header创建卡片头部 -->
            <div class="card-header">培训</div>
            <!-- .card-body卡片主体 -->
            <div class="card-body">
                <!-- .card-title卡片标题 -->
                <h5 class="card-title">Boostrap</h5>
                <!-- .card-subtitle卡片副标题 -->
                <!-- .text-muted字体设置为灰色 -->
                <h6 class="card-subtitle mb-2 text-muted">版本：4.0</h6>
                <p class="card-text">开始使用Bootstrap，这是世界上最流行的前端框架，
                    用于构建响应式移动优先网站，使用js和模板创建入门网页。
                </p>
                <!-- .card-link卡片链接 -->
                <a href="#" class="card-link">了解更多</a>
            </div>
            <!-- .card-footer卡片脚 -->
            <div class="card-footer text-muted">1天以前</div>
        </div>
        <hr>
        <!-- 卡片内放列表组 -->
        <!-- 可以使用css来控制卡片的宽度 -->
        <div class="card" style="width: 18rem;">
            <div class="card-header">培训</div>
            <!-- .list-group-flush让列表组的边框和卡片的边框重合 -->
            <ul class="list-group list-group-flush">
                <li class="list-group-item">Boostrap</li>
                <li class="list-group-item">HTML</li>
                <li class="list-group-item">CSS</li>
            </ul>
            <div class="card-body">
                <a href="#" class="card-link">了解更多</a>
                <a href="#" class="card-link">分享</a>
            </div>
        </div>
        <hr>
        <!-- 带图片的卡片 -->
        <div class="card" style="width: 18rem;">
            <!-- .card-img-top可以让图片放在卡片的最顶端 -->
            <img class="card-img-top" src="../images/logo.PNG" alt="">
            <div class="card-body">
                <p class="card-text">开始使用Bootstrap，这是世界上最流行的前端框架，
                    用于构建响应式移动优先网站，使用js和模板创建入门网页。
                </p>
            </div>
        </div>
        <hr>
        <div class="card" style="width: 300px;">
            <img class="card-img-top" src="../images/logo.PNG" alt="">
            <div class="card-body">
                <h5>John</h5>
                <p class="card-text">John是HTML,JS,CSS,Boostrap的讲师，他以有趣的教学而闻名。
                </p>
                <!-- 使用超链接实现按钮 -->
                <a href="#" class="btn btn-primary">联系方式</a>
            </div>
        </div>
        <hr>
        <div class="card" style="width: 300px;">
            <img class="card-img-top" src="../images/mi2.jpg" alt="">
            <!-- 将.card-body替换成.card-img-overlay，文字就会覆盖到图片上 -->
            <div class="card-img-overlay text-light">
                <h5>John</h5>
                <p class="card-text">John是HTML,JS,CSS,Boostrap的讲师，他以有趣的教学而闻名。
                </p>
                <a href="#" class="btn btn-primary">联系方式</a>
            </div>
            
        </div>
        <hr>
        <!-- 水平布局的卡片可以使用网格系统来实现 -->
        <div class="row">
            <div class="col-sm-6">
                <!-- .text-light将文本设置为白色 -->
                <!-- .bg-primary将北京修改为蓝色 -->
                <div class="card text-light bg-primary">
                    <div class="card-body">
                        <h5 class="card-title">Boostrap</h5>
                        <p class="card-text">开始使用Bootstrap，这是世界上最流行的前端框架，
                            用于构建响应式移动优先网站，使用js和模板创建入门网页。开始使用Bootstrap，这是世界上最流行的前端框架，
                            用于构建响应式移动优先网站，使用js和模板创建入门网页。</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <!-- .border-success将边框修改为绿色 -->
                <div class="card border-success">
                    <div class="card-body">
                        <h5 class="card-title">Boostrap</h5>
                        <p class="card-text">开始使用Bootstrap，这是世界上最流行的前端框架，
                            用于构建响应式移动优先网站，使用js和模板创建入门网页。开始使用Bootstrap，这是世界上最流行的前端框架，
                            用于构建响应式移动优先网站，使用js和模板创建入门网页。</p>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <!-- 卡片组 -->
        <div class="card-group">
            <div class="card text-light bg-primary">
                <div class="card-body">
                    <h5 class="card-title">Boostrap</h5>
                    <p class="card-text">开始使用Bootstrap，这是世界上最流行的前端框架，
                        用于构建响应式移动优先网站，使用js和模板创建入门网页。开始使用Bootstrap，这是世界上最流行的前端框架，
                        用于构建响应式移动优先网站，使用js和模板创建入门网页。</p>
                </div>
            </div>
            <div class="card text-light bg-primary">
                <div class="card-body">
                    <h5 class="card-title">Boostrap</h5>
                    <p class="card-text">开始使用Bootstrap，这是世界上最流行的前端框架，
                        用于构建响应式移动优先网站，使用js和模板创建入门网页。开始使用Bootstrap，这是世界上最流行的前端框架，
                        用于构建响应式移动优先网站，使用js和模板创建入门网页。</p>
                </div>
            </div>
        </div>
        <hr>
        <!-- 卡片堆 -->
        <div class="card-deck">
            <div class="card text-light bg-primary">
                <div class="card-body">
                    <h5 class="card-title">Boostrap</h5>
                    <p class="card-text">开始使用Bootstrap，这是世界上最流行的前端框架，
                        用于构建响应式移动优先网站，使用js和模板创建入门网页。开始使用Bootstrap，这是世界上最流行的前端框架，
                        用于构建响应式移动优先网站，使用js和模板创建入门网页。</p>
                </div>
            </div>
            <div class="card text-light bg-primary">
                <div class="card-body">
                    <h5 class="card-title">Boostrap</h5>
                    <p class="card-text">开始使用Bootstrap，这是世界上最流行的前端框架，
                        用于构建响应式移动优先网站，使用js和模板创建入门网页。开始使用Bootstrap，这是世界上最流行的前端框架，
                        用于构建响应式移动优先网站，使用js和模板创建入门网页。</p>
                </div>
            </div>
        </div>
        <hr>
        <!-- 卡片列 -->
        <div class="card-columns">
            <div class="card text-light bg-primary">
                <div class="card-body">
                    <h5 class="card-title">Boostrap</h5>
                    <p class="card-text">开始使用Bootstrap，这是世界上最流行的前端框架，
                        用于构建响应式移动优先网站，使用js和模板创建入门网页。开始使用Bootstrap，这是世界上最流行的前端框架，
                        用于构建响应式移动优先网站，使用js和模板创建入门网页。</p>
                </div>
            </div>
            <div class="card text-light bg-primary">
                <div class="card-body">
                    <h5 class="card-title">Boostrap</h5>
                    <p class="card-text">开始使用Bootstrap，这是世界上最流行的前端框架，
                        用于构建响应式移动优先网站，使用js和模板创建入门网页。开始使用Bootstrap，这是世界上最流行的前端框架，
                        用于构建响应式移动优先网站，使用js和模板创建入门网页。</p>
                </div>
            </div>
    
        
        </div>

    </div>

</body>

</html>